<template>
  <scroll-view
    class="home"
    scroll-y
    :refresher-enabled="true"
    :refresher-triggered="boxRefreshLoading"
    @refresherrefresh="boxRefreshHandle"
    @scrolltolower="boxBottomHandle"
    @scroll="scrollHandle"
  >
    <skeleton
      :loading="skeletonLoading"
      :navbarTitle="navbarTitle"
      :navStyle="navStyle"
      :navHeight="navHeight"
    >
      <view
        class="bg-cover"
        :style="{
          backgroundImage: 'url(' + (addBanner.length ? addBanner[current].image : '') + ')'
        }"
      ></view>
      <view class="header-swiper">
        <!-- <CustomNavbar :left="0" :title="navbarTitle" :bg="navBgColor"></CustomNavbar> -->
        <CustomNavbarHome :isFixed="false" :left="0" :bg="navStyle.bgColor">
          <view class="cust_nav">
            <!-- minHeight: navHeight, -->
            <view class="navbarTitle">
              {{ navbarTitle }}
            </view>
            <view @click="toRouter" :class="['search', navStyle.searchWidth == 'auto' ? '' : '']">
              <!-- :style="{ width: navStyle.searchWidth }" searchBox -->
              <u-icon
                class="icon"
                name="search"
                :color="
                  navStyle.searchText == 'none' && navStyle.searchWidth == 'auto' ? 'white' : '#fff'
                "
                size="28"
              ></u-icon>
              <!--666666 <text class="text" :style="{ whiteSpace: 'nowrap' }">
              请输入搜索内容
            </text> -->
            </view>
          </view>
        </CustomNavbarHome>
        <u-swiper
          :list="addBanner"
          previousMargin="35"
          nextMargin="35"
          circular
          radius="10"
          :height="
            +navHeight.replace('px', '') > 85 ? 'calc(100vh - 1100)' : 'calc(100vh - 1200rpx)'
          "
          bgColor="transparent"
          keyName="image"
          @click="clickBanner"
          @change="(e) => (current = e.current)"
          :autoplay="false"
        >
          <!-- imgMode="aspectFill" -->
          <view slot="indicator" class="indicator">
            <view
              class="indicator__dot"
              v-for="(item, index) in addBanner"
              :key="index"
              :class="[index === current && 'indicator__dot--active']"
            >
            </view>
          </view>
        </u-swiper>
      </view>
      <view class="divider" style="height: 30rpx"></view>
      <view class="home-body">
        <view class="h1-title mt-40">New Release</view>
        <u-scroll-list class="newList">
          <view
            v-for="(item, index) in newList"
            class="item"
            :key="index"
            @click="openVideoDetail(item.id, item.title, item.image, item.description)"
          >
            <u--image
              :src="item.image"
              class="img"
              width="230rpx"
              height="280rpx"
              :showLoading="true"
              bgColor="#121116"
              radius="20rpx"
            >
              <view slot="error" style="font-size: 24rpx">Error</view>
            </u--image>
            <view class="info">
              <view class="title u-line-1">{{ item.title }}</view>
              <view class="text u-line-1">{{ item.description }}</view>
            </view>
          </view>
        </u-scroll-list>
        <view class="h1-title">Most Trending</view>
        <u-scroll-list class="newList">
          <view
            v-for="(item, index) in favoriteList"
            class="item"
            :key="index"
            @click="openVideoDetail(item.id, item.title, item.image, item.description)"
          >
            <u--image
              :src="item.image"
              class="img"
              :showLoading="true"
              bgColor="#121116"
              radius="20rpx"
              width="230rpx" height="280rpx"
            >
              <view slot="error" style="font-size: 24rpx">Error</view>
            </u--image>
            <view class="info">
              <view class="title u-line-1">{{ item.title }}</view>
              <view class="text u-line-1">{{ item.description }}</view>
            </view>
          </view>
        </u-scroll-list>
        <view class="h1-title">favorite</view>
        <view class="favorite-content">
          <view
            class="favorite-box course-item_wrap"
            v-for="(item, index) in favoriteList"
            :key="index"
          >
            <view
              class="course-item"
              @click="openVideoDetail(item.id, item.title, item.image, item.description)"
            >
              <view class="course-cover">
                <u--image
                  :src="item.image"
                  class="img"
                  width="100%"
                  height="100%"
                  :showLoading="true"
                  bgColor="#121116"
                  radius="20rpx"
                >
                  <view slot="error" style="font-size: 24rpx">Error</view>
                </u--image>
              </view>
              <view class="course-info grid-view">
                <view class="">
                  <view class="course-title text-ellipsis-2">{{ item.title }}</view>
                  <view class="collection">{{ item.favorites }} following</view>
                  <view class="label">
                    <text><span>Action</span></text>
                  </view>
                  <view class="profile text-ellipsis">{{ item.description }}</view>
                </view>
                <view class="btns">
                  <u-button icon="play-circle" iconColor="#fff">Watching</u-button>
                  <u-button icon="heart-fill" iconColor="rgba(255, 255, 255, 0.25)">
                    Following
                  </u-button>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="h1-title">All</view>
        <view class="main_content" v-if="contentList && contentList.length">
          <!-- <scroll-view
          style="height: 100%"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-threshold="100"
          :refresher-triggered="refreshStatus"
          @refresherrefresh="refreshHandle"
          @scrolltolower="bottomHandle"
          @scroll="scrollHandle"
        > -->
          <view class="content_box">
            <view class="list">
              <block v-for="(lItem, lIndex) in contentList" :key="lIndex">
                <view
                  class="item item1"
                  @click="openVideoDetail(lItem.id, lItem.title, lItem.image, lItem.description)"
                >
                  <view class="img">
                    <!-- <u-image class="image" :src="lItem.image" mode="aspectFill"></u-image> -->
                    <u--image
                      :src="lItem.image"
                      class="img"
                      width="100%"
                      :showLoading="true"
                      bgColor="#121116"
                      radius="20rpx"
                    >
                      <view slot="error" style="font-size: 24rpx">Error</view>
                    </u--image>
                  </view>
                  <view class="info">
                    <view class="title u-line-1">{{ lItem.title }}</view>
                    <view class="text u-line-1">{{ lItem.description }}</view>
                  </view>
                </view>
              </block>
            </view>
            <view class="nodata" v-if="!contentList.length">
              <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
            </view>
            <view class="liststatus" v-else>
              <u-loadmore :status="isMore" :line="true" 
				:loading-text="loadText.loading" 
				:loadmore-text="loadText.loadmore" 
				:nomore-text="loadText.nomore" />
            </view>
          </view>
          <!-- </scroll-view> -->
        </view>
        <!-- #ifdef H5 -->
        <download />
        <!-- #endif -->
      </view>
    </skeleton>
  </scroll-view>
</template>

<script>
const notVideoUrls = ['我是机', '恋爱自由', '该吃药了', '我是老板']
import CustomNavbarHome from '../../components/CustomNavbar-home.vue'
import download from '../../components/download.vue'
import skeleton from './components/skeleton.vue'
export default {
  name: '',
  components: { CustomNavbarHome, skeleton, download },
  data() {
    return {
      StatusBarHeight: 0,
      // 状态栏的高度

      TitleBarHeight: 0,
      // 导航标题栏的高度
      navStyle: {
        marginLeft: 50,
        bgColor: 'transparent',
        transform: -50,
        searchText: 'none',
        searchWidth: 'auto'
      },
      loadText: {
        loadmore: 'loadmore',
        loading: 'loading',
        nomore: 'no more'
      },
      navbarTitle: 'BtcShort',
      current: 0,
      newList: [],
      addBanner: [],
      favoriteList: [],
      contentList: [],
      refreshStatus: true,
      isRefresh: false,
      isMore: 'nomore',
      pageNo: 1,
      pageTotal: 0,
      skeletonLoading: true,
      boxRefreshLoading: false,
      navHeight: 0,
      swiperMargin: 0
    }
  },
  computed: {
    bgImage() {
      return this.addBanner[this.current].image
    },
    swiperHeight() {
      return `calc(100vh - 500rpx - ${uni.$u.addUnit(
        uni.$u.getPx(uni.$u.props.navbar.height) + uni.$u.sys().statusBarHeight,
        'px'
      )})`
    }
  },
  created() {
    // 在进入页面时就应该获取到设备的状态栏高度，所以使用onload
    let that = this
    // 设置this指向，避免出现问题
    uni.getSystemInfo({
      // uniapp提供的判断平台的api，具体参考：https://uniapp.dcloud.io/api/system/info?id=getsysteminfo
      success: function (res) {
        // 调用成功的回调函数

        if (res.model.indexOf('iPhone') !== -1) {
          // 判断设备型号,此处仅判断手机型号是不是iPhone,
          // 因为iPhone的导航标题栏高度是44px,而其他设备多为48px（注意，这里是 px 而不是 rpx）

          that.TitleBarHeight = 44 + 'px'
          // 根据判断改变导航标题栏的高度，iPhone手机
        } else {
          that.StatusBarHeight = 48 + 'px'
          // 非iPhone手机
        }
        that.StatusBarHeight = res.statusBarHeight + 'px'
        // 获取到的设备状态栏高度，然后将值赋予想对应的对象，以改变对应的状态栏高度

        console.log(that.StatusBarHeight)
        console.log(that.TitleBarHeight)
      }
    })
  },
  onUnload() {
    console.log('onUnload', 'sohuye')
  },
  async onShow() {
    this.navHeight = uni.$u.addUnit(
      uni.$u.getPx(uni.$u.props.navbar.height) + uni.$u.sys().statusBarHeight,
      'px'
    )
    const minMargin = uni.$u.sys().screenWidth > 500 ? 170 : 85
    this.swiperMargin = (uni.$u.sys().screenWidth - (uni.$u.sys().screenWidth - minMargin)) / 2
    console.log(this.swiperMargin, uni.$u.sys().screenWidth, 'this.swiperMargin')
    await this.$onLaunched
  },
  async onLoad() {
    await this.$onLaunched
    this.init()
  },
  onPageScroll(e) {
    // let navHeight = this.$u.addUnit($u.getPx('44px') + this.$u.sys().statusBarHeight,'px')
    // if (e.scrollTop > 50) {
    //   let a = e.scrollTop / 300
    //   let b = 50 - a * 40
    //   if (b >= 0) {
    //     this.navStyle.marginLeft = b
    //     this.navStyle.transform = -b
    //   }
    //   this.navStyle.bgColor = `rgba(0,0,0, ${a > 1 ? 1 : a})`
    //   let w = e.scrollTop / 10
    //   if (w <= 60) {
    //     if (w >= 35) {
    //       this.navStyle.searchText = 'block'
    //     } else {
    //       // this.navStyle.searchText = 'none'
    //     }
    //     this.navStyle.searchWidth = w + '%'
    //   }
    //   // this.navStyle.searchText = 'block'
    // } else {
    //   this.navStyle.bgColor = 'transparent'
    //   this.navStyle.marginLeft = 50
    //   this.navStyle.transform = -50
    //   this.navStyle.searchWidth = 'auto'
    //   this.navStyle.searchText = 'none'
    // }
  },
  onReachBottom() {
    if (this.contentList.length < this.pageTotal) {
      ++this.pageNo
      this.getVideoList(false)
    }
  },
  methods: {
    toRouter() {
      this.jumpView('/pages/video/search')
    },
    clickBanner(e) {
      let item = this.addBanner[e]
      this.openVideoDetail(item.id, item.title, item.image, item.description)
      //   const obj = { ...item }
      // this.jumpView(`/pages/video/play?id=${item.id}&d=${JSON.stringify(obj)}`)
    },
    init() {
      this.$request('video.addonsIndex')
        .then((resp) => {
          this.newList = resp.data.new.filter((v) => !notVideoUrls.includes(v.title))
          this.addBanner = resp.data.recommend //.filter((v) => !notVideoUrls.includes(v.title))
          this.favoriteList = resp.data.favorite.filter((v) => !notVideoUrls.includes(v.title))
          this.boxRefreshLoading = false
        })
        .catch(() => {
          this.boxRefreshLoading = false
        })
      this.getVideoList()
    },
    getVideoList(refresh = true) {
      const vm = this
      if (refresh) {
        this.pageNo = 1
      }
      this.$request('video.allAddons', {
        current: this.pageNo,
        pageSize: 10
      }).then((resp) => {
        this.pageTotal = resp.data.total
        if (resp.data.records && resp.data.records.length) {
          const list = resp.data.records.filter((v) => !notVideoUrls.includes(v.title))
          vm.contentList = refresh ? list : [...vm.contentList, ...list]
          vm.isMore = 'loadmore'
          if (vm.pageTotal == vm.contentList.length) {
            vm.isMore = 'nomore'
          } else {
            vm.isMore = 'loadmore'
          }
        } else {
          vm.isMore = 'nomore'
        }
        this.skeletonLoading = false
      })
    },
    boxRefreshHandle() {
      this.boxRefreshLoading = true
      this.init()
    },
    // 下拉刷新
    refreshHandle() {
      this.refreshStatus = true
      if (!this.isRefresh) {
        this.isRefresh = true
        this.filter.current = 1
        this.contentList[this.contentCurrent].list = []
        this.getVideoList()
      }
    },
    // 滚动监听
    scrollHandle(e) {
      // if (this.contentCurrent == 0) {
      //   this.isTabsFixed = e.detail.scrollTop > 200 ? true : false
      // }
      // if (e.detail.scrollTop > 50) {
      //   let a = e.detail.scrollTop / 300
      //   let b = 50 - a * 40
      //   if (b >= 0) {
      //     this.navStyle.marginLeft = b
      //     this.navStyle.transform = -b
      //   }
      //   this.navStyle.bgColor = `rgba(0,0,0, ${a > 1 ? 1 : a})`
      //   let w = e.detail.scrollTop / 10
      //   // console.log('wwww1', w)
      //   if (w <= 60) {
      //     // console.log('wwww', w)
      //     if (w >= 35) {
      //       this.navStyle.searchText = 'block'
      //     } else {
      //       // this.navStyle.searchText = 'none'
      //     }
      //     this.navStyle.searchWidth = w + '%'
      //   }
      //   // this.navStyle.searchText = 'block'
      // } else {
      //   this.navStyle.bgColor = 'transparent'
      //   this.navStyle.marginLeft = 50
      //   this.navStyle.transform = -50
      //   this.navStyle.searchWidth = 'auto'
      //   this.navStyle.searchText = 'none'
      // }
    },
    // 触底滚动
    boxBottomHandle() {
      // console.log(123, 'this.originIndex == this.originData.length - 1')
      ++this.pageNo
      this.getVideoList(false)
    }
  }
}
</script>

<style>
page {
  min-height: 100vh;
}
</style>
<style lang="scss" scoped>
.text-ellipsis {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.navbarTitle {
  margin-left: 35rpx;
}

.cust_nav {
  padding: 0 20rpx;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  // justify-content: space-around;
}

.search {
  position: absolute;
  right: 20rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  margin: 35rpx 0;
  // z-index: 999999999;
  // height: 65rpx;
  min-width: 100rpx;

  // background-color: red;
  &.searchBox {
    // height: 65rpx;
    border-radius: 39rpx;
    background-color: white;
    margin-left: 38rpx;
    color: #666666;
    margin-left: 16rpx;
    overflow: hidden;
  }

  .search-icon {
    width: 40rpx;
    height: 40rpx;
    color: #000;
  }

  .text {
    margin-left: 10rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}

.home {
  height: 100%;
  overflow-y: scroll;
}

.bg-cover {
  width: 100%;
  height: calc(100vh - 1100rpx);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color: rgba(25, 24, 37, 0.7);
  background-blend-mode: multiply;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: 0.3s ease-in-out;

  // height: 100%;
}

/deep/.u-swiper {
  overflow: initial;
  margin-top: 25rpx;

  .u-swiper__indicator {
    bottom: -38rpx;
  }
}

.home-body {
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  height: 100%;

  .newList {
    margin-top: 30rpx;
    // h5会报错 TypeError: Cannot read properties of null (reading '__vue__')"
    /deep/.u-scroll-list__indicator {
      position: absolute;
      left: -9999px;
    }
    .item {
      width: 230rpx;
      margin-bottom: 40rpx;
      margin-right: 25rpx;

      .img {
        width: 230rpx;
        height: 280rpx;
        border-radius: 20rpx;
        overflow: hidden;

        .image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        margin-top: 16rpx;

        .title {
          font-size: 28rpx;
          color: white;
          font-weight: 700;
        }

        .text {
          font-size: 24rpx;
          color: #666;
          margin-top: 4rpx;
        }
      }
    }
  }
}

.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 11rpx;
    width: 11rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 8rpx;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
      width: 27.5rpx;
      border-radius: 5.5rpx;
    }
  }
}

.main_content {
  // overflow: hidden;
  margin-top: 30rpx;
  flex: 1;
  // margin-bottom: 100rpx;

  .content_box {
    padding: 20rpx 0 20rpx 0;

    .list {
      display: flex;
      flex-wrap: wrap;

      .sitem {
        width: 100%;
        height: 516rpx;
        border-radius: 20rpx;
        overflow: hidden;
        display: flex;
        margin-bottom: 40rpx;

        .left {
          width: 52%;

          .image {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: 48%;
          background: linear-gradient(0deg, rgba(35, 36, 40, 1) 0%, rgba(100, 105, 124, 1) 100%);
          padding: 30rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #fff;

          .info {
            height: 100%;
            display: flex;
            flex-direction: column;

            .tbox {
              flex: 1;
            }

            .title {
              font-size: 32rpx;
              font-weight: 700;
            }

            .text {
              font-size: 24rpx;
              margin-top: 16rpx;
              color: #eee;
              line-height: 40rpx;
            }

            .text1 {
              flex: 1;
            }
          }

          .button {
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            background: #484b52;
            border-radius: 10rpx;
            margin-top: 16rpx;

            &.collect {
              opacity: 0.6;
            }

            &.active {
              background: rgba(#000, 0.2);
            }

            .text {
              margin-left: 8rpx;
            }
          }
        }
      }

      .item {
        width: 48%;
        margin-bottom: 40rpx;
        margin-right: 25rpx;

        .img {
          width: 100%;
          // height: 480rpx;
          border-radius: 20rpx;
          overflow: hidden;

          .image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          margin-top: 16rpx;

          .title {
            font-size: 28rpx;
            color: white;
            font-weight: 700;
          }

          .text {
            font-size: 24rpx;
            color: #666;
            margin-top: 4rpx;
          }
        }
      }
    }

    .nodata {
      padding: 15vh 0;
    }

    .item1 {
      &:nth-child(10n),
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
.favorite-content {
  margin-top: 15rpx;
  .favorite-box {
    width: 100%;
    margin-bottom: 30rpx;
    //  width: calc((100% - .75rem)/2);
    // margin-bottom: .625rem;
    .course-item {
      display: flex;
      padding: 24rpx;
      border: 2rpx solid #484568;
      background-color: #2f2d45;
      background-image: url('../../static/images/course_it_bg-rDsMk80M.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      border-radius: 10rpx;
      box-sizing: border-box;
      .course-cover {
        width: 260rpx;
        height: 354rpx;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .course-info {
        flex: 1;
        padding: 8rpx 20rpx 0;
        margin-top: 0;
        color: #fff;
        .collection {
          display: inline-block;
          height: 42rpx;
          line-height: 42rpx;
          padding: 0 12rpx;
          border-radius: 10rpx;
          background: #ffefe1;
          border: 2rpx solid #e7ac72;
          box-sizing: border-box;
          font-size: 20rpx;
          font-weight: 500;
          letter-spacing: 0;
          color: #d43030;
          margin-top: 20rpx;
        }
        .label {
          display: flex;
          flex-wrap: wrap;
          font-size: 22rpx;
          font-weight: 500;
          margin-top: 12rpx;
          text {
            // padding-right: .875rem
            padding-right: 0;
          }
        }
        .profile {
          margin-top: 14rpx;
          font-size: 20rpx;
          -webkit-line-clamp: 4;
        }
        .btns {
          display: flex;
          margin-bottom: 19rpx;
          align-items: flex-end;
          .u-button {
            width: auto;
            height: 44rpx;
            padding: 0 12rpx;
            border-radius: 9rpx;
            border: none !important;
            background-color: rgba(255, 255, 255, 0.25);
            color: white;
            margin: 0;
            font-size: 20rpx;
            &:first-child {
              margin-right: 44rpx;
            }
            /deep/.u-icon .u-icon__icon {
              font-size: 26rpx !important;
            }
          }
        }
      }
    }
  }
}
.grid-view {
  display: grid;
}
</style>
